
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>按钮</title>
    <!-- 移动设备支持 -->
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <link rel="stylesheet" type="text/css" href="button.css">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
   <div>
        <a href="http://www.bootcss.com/" class="button button-tiny">Go</a>
        <a href="http://www.bootcss.com/" class="button button-rounded button-tiny">Go</a>
        <a href="http://www.bootcss.com/" class="button button-pill button-tiny">Go</a>
        <button class="button button-square button-tiny"><i class="fa fa-plus"></i></button>
        <button class="button button-box button-tiny"><i class="fa fa-plus"></i></button>
        <button class="button button-circle button-tiny"><i class="fa fa-plus"></i></button>

        <a href="http://www.bootcss.com/" class="button button-primary button-small">Go</a>
        <a href="http://www.bootcss.com/" class="button button-primary button-rounded button-small">Go</a>
        <a href="http://www.bootcss.com/" class="button button-primary button-pill button-small">Go</a>
        <button class="button button-primary button-square button-small"><i class="fa fa-plus"></i></button>
        <button class="button button-primary button-box button-small"><i class="fa fa-plus"></i></button>
        <button class="button button-primary button-circle button-small"><i class="fa fa-plus"></i></button>
   </div>

   <div>
        <button class="button button-3d button-box button-jumbo"><i class="fa fa-thumbs-up"></i></button>
        <a href="http://www.bootcss.com/" class="button button-3d button-primary button-rounded">Check out the new site!</a>
        <a href="http://www.bootcss.com/" class="button button-3d button-action button-pill">Visit Us!</a>
        <button class="button button-3d button-action button-circle button-jumbo"><i class="fa fa-thumbs-up"></i></button>
        <a href="http://www.bootcss.com/" class="button button-3d button-caution"><i class="fa fa-camera"></i> Go</a>
        <a href="http://www.bootcss.com/" class="button button-3d button-royal">Say Hi!</a>
   </div>
   <div>
        <a href="http://www.bootcss.com/" class="button button-raised button-primary button-pill">Visit Us!</a>
        <button class="button button-raised button-action button-circle button-jumbo"><i class="fa fa-thumbs-up"></i></button>
        <a href="http://www.bootcss.com/" class="button button-raised button-caution"><i class="fa fa-camera"></i> Go</a>
        <a href="http://www.bootcss.com/" class="button button-raised button-royal">Say Hi!</a>
        <a href="http://www.bootcss.com/" class="button button-raised button-pill button-inverse">Say Hi!</a>
   </div>
   <div>
        <button class="button button-primary button-box button-giant button-longshadow-right">
            <i class="fa fa-twitter"></i>
        </button>

        <button class="button button-caution button-box button-raised button-giant button-longshadow">
            <i class="fa fa-google-plus"></i>
        </button>

        <button class="button button-action button-box button-giant button-longshadow-left">
            <i class="fa fa-share-alt"></i>
        </button>

        <button class="button button-highlight button-box button-giant button-longshadow-right button-longshadow-expand">
            <i class="fa fa-rss"></i>
        </button>

        <button class="button button-primary button-circle button-giant button-longshadow">
            <i class="fa fa-gear"></i>
        </button>
   </div>
   <div>
        <a href="http://www.bootcss.com/" class="button button-glow button-rounded button-raised button-primary">Go</a>
        <a href="http://www.bootcss.com/" class="button button-glow button-border button-rounded button-primary">Go</a>
        <button class="button button-glow button-circle button-action button-jumbo"><i class="fa fa-thumbs-up"></i></button>
        <a href="http://www.bootcss.com/" class="button button-glow button-rounded button-highlight">Go</a>
        <a href="http://www.bootcss.com/" class="button button-glow button-rounded button-caution">Go</a>
        <a href="http://www.bootcss.com/" class="button button-glow button-rounded button-royal">Go</a>
   </div>
   <div>
        <span class="button-dropdown" data-buttons="dropdown">
        <button class="button button-rounded">
          Select Me <i class="fa fa-caret-down"></i>
        </button>

        <ul class="button-dropdown-list">
          <li><a href="http://www.bootcss.com/">Option Link 1</a></li>
          <li><a href="http://www.bootcss.com/">Option Link 2</a></li>
          <li class="button-dropdown-divider">
            <a href="#">Option Link 3</a>
          </li>
        </ul>
        </span>

        <span class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
        <button class="button button-primary button-large">
          <i class="fa fa-bars"></i> Select Me
        </button>

        <ul class="button-dropdown-list is-below">
          <li><a href="http://www.bootcss.com/"><i class="fa fa-heart-o"></i> Option Link 1</a></li>
          <li><a href="http://www.bootcss.com/">Option Link 2</a></li>
          <li class="button-dropdown-divider">
            <a href="#">Option Link 3</a>
          </li>
        </ul>
        </span>


        <span class="button-dropdown button-dropdown-action" data-buttons="dropdown">
        <button class="button button-action">
          Select Me <i class="fa fa-caret-up"></i>
        </button>

        <ul class="button-dropdown-list is-above">
          <li><a href="http://www.bootcss.com/">Option Link 1</a></li>
          <li><a href="http://www.bootcss.com/">Option Link 2</a></li>
          <li class="button-dropdown-divider">
            <a href="#">Option Link 3</a>
          </li>
        </ul>
        </span>

        <span class="button-dropdown button-dropdown-plain" data-buttons="dropdown">
        <button class="button button-caution button-pill">
          Select Me <i class="fa fa-caret-down"></i>
        </button>

        <ul class="button-dropdown-list">
          <li><a href="http://www.bootcss.com/">Option Link 1</a></li>
          <li class="button-dropdown-divider">
            <a href="http://www.bootcss.com/">Option Link 2</a>
          </li>
          <li>
            <a href="#">Option Link 3</a>
          </li>
        </ul>
        </span>

        <span class="button-dropdown button-dropdown-inverse" data-buttons="dropdown">
        <a href="#" class="button button-inverse">
            <i class="fa fa-envelope"></i> Select Me <i class="fa fa-caret-down"></i>
        </a>

        <ul class="button-dropdown-list is-below">
          <li><a href="http://www.bootcss.com/">Option Link 1</a></li>
          <li class="button-dropdown-divider">
            <a href="http://www.bootcss.com/">Option Link 2</a>
          </li>
          <li>
            <a href="#">Option Link 3</a>
          </li>
        </ul>
        </span>
   </div>
</body>
</html>
